.contianer-box{
  height: calc(100% - 100px);
  .header-wrapper{
    .header-content-wrapper{
      display: inline-block;
      padding: 1rem;
      h1{
        font-weight: normal;
      }
      p{
        color: #929292;
      }
    }
    .header-image-wrapper{
      display: inline-block;
      margin: 1rem auto;
      margin-left: 3rem;
    }
    .header-search-wrapper{
      svg{
        margin-top: 1rem;
      }
      input{
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 5rem;
      }
    }
    .header-photo-wrapper{
      height: 10rem;
      width: 100%;
      position: relative;
      img{
        width:22rem ;
        height: 100%;
        margin:0 8px;
        padding:0 0.5rem;
      }
    }
  }
  .main-wrapper{
    margin-top: 1rem;
    .main-host-wrapper{
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: space-between; /* 左右对齐 */
      align-items: center; 
      padding: 1rem;
      .header-title{
        font-size: 1.2rem;
      }
      .header-most{
        color: #929292;
        font-size: .8rem;
      }
    }
    .main-host-content-wrapper{
      display: flex;
      .image-container {
        margin:0 0.8rem;
        position: relative;
        width: 100%;
        .host-image{
          width: 10rem;
          height: 60%;
          display: block;
          border-radius: 0.5rem;
        }
        .host-teacher-wrapper{
          .host-teacher-title-wrapper{
            font-size: 15px;
            color: #605f5f;
          }
          .teacher-wrapper{
            font-size: 12px;
            color: #929292;
          }
          .teacher-score{
            font-size: 12px;
            color: #605f5f;
          }
        }
      }
      
      .image-container img {
        width: 10rem;
        height: 90%;
        display: block;
        border-radius: 0.5rem;
      }
      .text-overlay {
        position: absolute;
        bottom: 2rem;
        right: 2.5rem;
        color: white;
        padding: 5px 10px;

      }
      
      .text-overlays {
        position: absolute;
        top: 0.5rem;
        left: 1rem;
        border-radius: 5px;
        color: white;
        background-color: orange;
        padding: 3px 5px;
        font-size: 12px;
      }
    }
    .main-teacher-wrapper{
      width: 100vw;
      .tearch-image-wrapper{
        max-width: 100%;
        width: 10rem;
        height: auto;
      }
    }
  }
}
.main-teacher-wrapper{
  padding: 2px;
  
}
.tearch-image-wrapper{
  margin: 5px;
  max-width: 95%;
  // width: 10rem;
  height: auto;
}